<template>
  <div class="search">
    <p>关键字:{{ kw }}</p>
    <button @click="$router.push(`/sug?kw=${kw}`)">搜索建议</button>
    <div class="sortnav">
      <div
        :class="{ 'sn-yf': true, sortActive: extendType == 'yf' }"
        @click="setExtendType('yf')"
      >
        月付
      </div>
      <div
        :class="{ 'sn-nf': true, sortActive: extendType == 'nf' }"
        @click="setExtendType('nf')"
      >
        年付
      </div>
      <div
        :class="{ 'sn-xs': true, sortActive: extendType == 'xs' }"
        @click="setExtendType('xs')"
      >
        销售
      </div>
      <div class="sort">
        <van-dropdown-menu active-color="#1989fa">
          <van-dropdown-item
            :title="title"
            title-class="titleActive"
            v-model="sortType"
            :options="option"
          />
        </van-dropdown-menu>
      </div>
      <div class="filter" @click="setMoreFilterShow(true)">筛选</div>
    </div>
    <div class="list">
      <div v-for="pro in searchList" :key="pro.id">
        <h4>{{ pro.title }}</h4>
        <p v-if="extendType == 'yf'">￥{{ pro.price }}/月</p>
        <p v-else-if="extendType == 'nf'">
          ￥{{ pro.extendPrices }}/{{ pro.extendYears }}年
        </p>
        <p v-else-if="extendType == 'xs'">￥{{ pro.price }}</p>
      </div>
    </div>
    <van-loading size="24px" v-show="showLoading" vertical
      >加载中...</van-loading
    >
    <div ref="filter" class="moreFilter animate__animated" v-show="showFilter">
      <button @click="setMoreFilterShow(false)">隐藏</button>
      <hr />
      <!-- 分类 -->
      <div class="category">
        <p>分类:</p>
        <ul>
          <li
            :class="{ active: curCates.id == cate.id }"
            v-for="cate in category"
            :key="cate.id"
            @click="setCurCates(cate)"
          >
            {{ cate.name }}
          </li>
        </ul>
      </div>
      <!-- 品牌选项 -->
      <div
        class="brand"
        v-if="Object.keys(curCates).length && curCates.erpDetails.length"
      >
        <p>品牌:</p>
        <ul>
          <li
            :class="{ active: brandVal == brand.v }"
            v-for="brand in curCates.erpDetails[0].brand.content"
            :key="brand.oid"
            @click="brandVal = brand.v"
          >
            {{ brand.k }}
          </li>
        </ul>
      </div>
      <!-- 新旧对象，价格范围，服务方式 -->
      <div class="service">
        <div v-for="sitem in service" :key="sitem.param">
          <p>{{ sitem.label }}:</p>
          <ul>
            <li
              :class="{
                cActive: sitem.param == 'condition' && condition == item.v,
                pActive: sitem.param == 'price' && price == item.v,
                rActive: sitem.param == 'rentType' && rentType == item.v,
              }"
              @click="setServiceType(sitem.param, item.v)"
              v-for="item in sitem.content"
              :key="item.v"
            >
              {{ item.k }}
            </li>
          </ul>
        </div>
      </div>
      <!-- 个人配置 -->
      <div
        class="personal"
        v-if="Object.keys(curCates).length && curCates.erpDetails.length"
      >
        <div v-for="p1 in curCates.erpDetails" :key="p1.v">
          <div v-for="p2 in p1.personal" :key="p2.param">
            <p>{{ p2.label }}</p>
            <ul>
              <li
                :class="{
                  active:
                    personal[p2.param].length == 0
                      ? item.v == ''
                      : personal[p2.param].indexOf(item.v) !== -1,
                }"
                @click="setPersonal(p2.param, item.v)"
                v-for="item in p2.content"
                :key="item.v"
              >
                {{ item.k }}
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import { IAjaxData, IParams } from "@/types/types";

export default Vue.extend({
  name: "Vue2TsEdianSearch",
  data() {
    return {
      showLoading: false,
      kw: "",
      searchList: [] as IParams[],
      sortType: "", // 排序类型: 默认0 销量高低3 价格低高2 价格高低1
      extendType: "yf", // 分期类型: 月付:yf 年付:nf 销售:xs
      option: [
        { text: "默认排序", value: "0" },
        { text: "销量从高到低", value: "3" },
        { text: "价格从低到高", value: "2" },
        { text: "价格从高到低", value: "1" },
      ],
      title: "默认排序",
      sortMap: {
        0: "默认排序",
        3: "销量↓",
        2: "价格↑",
        1: "价格↓",
      } as IParams,
      params: {
        time: 1662088399737,
        code: "bfe5505b452bc2e680aa29e9d9c46d04",
        page: 1,
        size: 10,
        errorCheck: 1,
        categoryId: 0,
        sort: 0, // 默认按照 0(默认排序) 进行请求
        isHaveExtend: 0, // 默认按照 月付 请求
        title: "",
        searchStatus: 1,
        plat: 2,
        notFoundStatus: 1,
        secondSearchStatus: 1,
        customerId: "",
      } as IParams,
      showFilter: true, // 侧边栏筛选
      category: [] as IParams[], // 分类
      curCates: {} as IParams, // 当前选中的分类对象
      service: [] as IParams[], // 三个固定的类型：新旧对象，价格范围，服务方式
      condition: "", // 新旧属性, ""代表不限
      price: "", // 价格范围, ""代表不限
      rentType: "", // 服务方式,  ""代表不限
      brandVal: "", // 品牌
      personal: {
        screenSize: [], // 屏幕尺寸,
        cpuModel: [], // CPU类型
        merSize: [], // 内存容量
        diskType: [], // 硬盘类型
        diskSize: [], // 硬盘容量
        graType: [], // 显卡类型
        graSize: [], // 显卡容量
        graNum: [], // 显卡型号
      } as IParams,
    };
  },
  created() {
    this.kw = this.$route.query.kw as string;
    this.params.title = this.kw;
    this.getSearchList();
    this.getFilterDatas();
  },
  methods: {
    async getSearchList() {
      this.searchList = [];
      this.showLoading = true;
      let params: string = "";
      for (const key in this.params) {
        params += `${key}=${this.params[key]}&`;
      }
      const data: IAjaxData = await this.$request(
        `/edian/newsCategory/queryAllProductForNew?${params}`,
        "POST"
      );
      this.showLoading = false;
      this.searchList = data.data.data.items;
    },
    setExtendType(type: string) {
      this.extendType = type;
      this.params.isHaveExtend = type == "nf" ? 1 : 0;
      this.params.isSale = type == "xs" ? 1 : 0;
      this.getSearchList();
    },
    setMoreFilterShow(bool: boolean) {
      const filterDiv: HTMLElement = this.$refs.filter as HTMLElement;
      if (bool) {
        this.showFilter = true;
        filterDiv.classList.add("animate__fadeInRight");
        setTimeout(() => {
          filterDiv.classList.remove("animate__fadeInRight");
        }, 500);
      } else {
        filterDiv.classList.add("animate__fadeOutRight");
        setTimeout(() => {
          filterDiv.classList.remove("animate__fadeOutRight");
          this.showFilter = false;
        }, 500);
      }
    },
    async getFilterDatas() {
      const data: IAjaxData = await this.$request(
        "/edian/newsCategory/queryAllProductCatagloyForNew?time=1662080354432&code=a200ab05ee97a1b5ab9637254fd727ab",
        "GET"
      );
      this.category = data.data.Catagroy;
      this.curCates = this.category[0];
      this.service = data.data.oldCatagroy.data.commonFacets;
    },
    setCurCates(cate: IParams) {
      this.curCates = cate;
    },
    setServiceType(param: string, val: string) {
      switch (param) {
        case "condition":
          this.condition = val;
          break;
        case "price":
          this.price = val;
          break;
        case "rentType":
          this.rentType = val;
          break;
        default:
          break;
      }
    },
    setPersonal(param: string, val: string) {
      console.log(param, val);
      const arr = this.personal[param];
      if (arr.length) {
        // 此时应该判断当前点击的值，是否在数组中存在，存在就移除，不存在就添加
        const idx = arr.indexOf(val);
        if (idx == -1) {
          arr.push(val);
        } else {
          arr.splice(idx, 1);
        }
      } else {
        // 此时数组为空，直接添加值到数组中
        arr.push(val);
      }
    },
  },
  watch: {
    sortType(val) {
      this.title = this.sortMap[val];
      this.params.sort = val;
      this.getSearchList();
    },
  },
});
</script>

<style lang="less" scoped>
.search {
  height: 95vh;
  overflow-y: scroll;
  &::-webkit-scrollbar {
    display: none;
  }
}
.sortnav {
  display: flex;
  height: 50px;
  justify-content: space-around;
  align-items: center;
  :deep(.van-dropdown-item__content) {
    width: 140px;
    left: 170px;
    font-size: 12px;
    .van-cell__title {
      margin-right: 5px;
      -webkit-box-flex: none;
      -webkit-flex: none;
      flex: none;
    }
  }
  :deep(.van-dropdown-menu__bar) {
    .titleActive > .van-ellipsis {
      color: #1989fa;
    }
  }
  .sortActive {
    color: #1989fa;
  }
}
.moreFilter {
  position: fixed;
  top: 0;
  right: 0;
  background-color: #fff;
  width: 285px;
  height: 100vh;
  overflow-y: scroll;
  z-index: 1000;
  animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
  animation-duration: 0.5s;
  &::-webkit-scrollbar {
    display: none;
  }
  p {
    padding-left: 10px;
  }
  ul {
    display: flex;
    flex-wrap: wrap;
    padding: 5px;
    li {
      min-width: 70px;
      height: 25px;
      text-align: center;
      line-height: 25px;
      background-color: lightblue;
      border-radius: 5px;
      margin: 5px;
      padding: 5px;
      font-size: 12px;
      &.active,
      &.cActive,
      &.pActive,
      &.rActive {
        background-color: yellow;
        color: blue;
      }
    }
  }
}
</style>
